<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-08-08 
 -->


<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="searchText" prefix-icon="el-icon-search"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" @click="handlerSearch">搜索</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="DialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>

      <el-table :data="tabledate" border>
        <el-table-column label="编号" prop="id" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="密码" prop="password" />
        <el-table-column label="邮箱" prop="mail" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[1, 3, 5, 10]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" />
      
      <add-user v-model="DialogVisible" @response="response"></add-user>
      <edit-user v-if="editDialogVisible" v-model="editDialogVisible" @response="response" :rid="rid"></edit-user>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import addUser from './addUser.vue';
import editUser from './editUser.vue';
async function useLoadList(state: any) {
  const params = { pageNumber: state.pagination.currentPage, pageSize: state.pagination.pageSize, search: state.searchText }
  //@ts-ignore
  const { list, totalCount } = await ajax({url: "users", params})
  state.tabledate = list;
  state.pagination.total = totalCount;
}

function paginationChange(state: any) {

    const handleSizeChange = (newSize: number) => {
      state.pagination.pageSize = newSize;
      useLoadList(state);
    };
    const handleCurrentChange = (newCurrent: number) => {
      state.pagination.currentPage = newCurrent;
      useLoadList(state);
    };
  return {
    handleSizeChange,
    handleCurrentChange
  }
}

function useSearch(state: any) {
  const handlerSearch = async () => {
    state.pagination.currentPage = 1;
    const params = { pageNumber: state.pagination.currentPage, pageSize: state.pagination.pageSize, search: state.searchText }
    // @ts-ignore
    const { list, totalCount } = await ajax({url: "users", params});
    state.tabledate = list;
    state.pagination.total = totalCount;
  }

  return { handlerSearch }
}
export default defineComponent({
  name: "~index",
  components: { addUser, editUser },
  setup(props, { emit, slots }) {
    const state = reactive({
      searchText: '',
      tabledate: [],
      DialogVisible: false,
      editDialogVisible: false,
      rid: '',
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 3
      },
      response() {
        useLoadList(state);
      },
      handleEdit(row: any) {
        state.editDialogVisible = true;
        state.rid = row.id
      },
      async handleDelete(row: any) {
        const confirmResult = await ElMessageBox.confirm('确定要删除该数据?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err)
        if (confirmResult !== 'confirm') return ElMessage.info('取消删除！');
        //@ts-ignore
        const { code } = await ajax({url: "user/delete", method: "delete", params: { id: row.id}});
        if (code === "ok") ElMessage.success('删除成功！');
        useLoadList(state);
      }
    });

    onMounted(() => {
      useLoadList(state);
      
    });
    return {
      ...toRefs(state),
      ...paginationChange(state),
      ...useSearch(state),
    };
  }
});
</script>

<style lang='css' scoped>
.el-breadcrumb {
  margin-bottom: 14px;
}
</style>
